<template>
	<view>
		<view class="read-list">
			<view class="read-item" @click="naviTo(r.id)" v-for="(r, i) in ReadList" :key="r.id">
				<view class="read-image">
					<image :src="r.cover" mode="widthFix"></image>
				</view>
				<view class="read-info">
					<view class="read-title">
						{{r.title}}
					</view>
					<view class="read-sub">
						{{r.subtitle}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	const url = 'find/bymonth/1/'
	const date = new Date()
	
	export default {
		name:"ReadView",
		data() {
			return {
				ReadList: []
			};
		},
		created() {
			let year = this.getTime().year
			let month = date.getMonth() + 1
			let isMonth = month
			for (month = isMonth; month > isMonth - 2; month--) {
				month = (month > 9) ? month : '0' + month
				http(url + year + '-' + month).then(res => {
					// console.log(res);
					this.ReadList = [...this.ReadList, ...res.data]
					console.log(this.ReadList);
				})
			}
		},
		methods: {
			naviTo(id) {
				uni.navigateTo({
					url: '../../pages/ReadContent/ReadContent?id=' + id
				})
			},
			getTime() {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month = (month > 9) ? month : '0' + month
				return {
					year,
					month
				}
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.read-item {
		margin: 10px 10px;
		display: flex;
		width: 750rpx;
		height: 100rpx;
		
		.read-image {
			margin-right: 10px;
			flex: 1.5;
			overflow: hidden;
			border-radius: 8px;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.read-info {
			flex: 8.5;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.read-title {
				margin-top: 5px;
				font-size: 12px;
				width: 560rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.read-sub {
				margin-bottom: 5px;
				font-size: 10px;
				color: #c1c1c1;
				width: 560rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>